

<template>
  <div class="bgColor">
    <div class="mainbox">
      <div class="categoryBox">
        <span class="label">类型过滤：</span>
        <ul class="tabbox">
          <li
            @click="tabHandle(index, item)"
            class="tabItem"
            v-for="(item, index) in tabList"
            :class="{ activeCss: index == currentIndex }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="majorList" v-if="resultList.length > 0">
        <div
          class="itembox"
          v-for="(item, index) in resultList"
          @click="gotoDetail(item)"
        >
          <img class="majorimg" @error="onError" :src="item.murl" alt="" />
          <div class="infobox">
            <p class="title">{{ item.name }}</p>
            <div class="flexbox">
              <div class="flex">
                <img class="icon" src="../assets/file.png" alt="" />
                <span class="spancss">{{ item.fileSizeStr }}</span>
              </div>
              <div class="flex">
                <img src="../assets/time.png" alt="" />
                <span class="spancss">{{ item.createTime }}</span>
              </div>
            </div>
            <div class="flexbox">
              <div class="flex">
                <img class="icon" src="../assets/eye.png" alt="" />
                <span class="spancss">{{ item.view }}</span>
              </div>
              <div class="flex">
                <img src="../assets/message.png" alt="" />
                <span class="spancss">{{
                  item.evaluationNumber ? item.evaluationNumber : 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <empty v-else></empty>
      <div class="pagination" v-if="resultList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next,total,jumper"
          :total="total"
          @current-change="sizeChange"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { webList } from '@/api/api.js'
import { reactive } from 'vue'
import staticImg from '@/assets/static.png'
import { eventBus } from '@/utils/eventBus.js'
import empty from '@/components/empty.vue'
const currentIndex = ref(0)
const tabList = ref([
  '全部',
  '专业标准',
  '专业调研',
  '行业标准',
  '行业信息',
  '技能竞赛',
  '职业认证',
  '名师名家',
  '专业资料',
])
let typeListStr =
  '专业标准,专业调研,行业标准,行业信息,技能竞赛,职业认证,名师名家,专业资料'
const params = reactive({
  majorId: 'a67aaa9a-c720-4840-9c5c-522993bc96bd',
  pageNum: 1,
  pageSize: 12,
  column: 0,
  applicationTypeList: typeListStr,
  keyWord: '',
})

const resultList = ref([])
const total = ref(0)
function webListApi() {
  webList(params).then((res) => {
    resultList.value = res.rows
    total.value = res.total
  })
}
function tabHandle(index, item) {
  if (index == 0) {
    params.applicationTypeList = typeListStr
  } else {
    params.applicationTypeList = item
  }
  currentIndex.value = index
  webListApi()
}
webListApi()

function onError(event) {
  event.target.src = staticImg
}

function sizeChange(size) {
  params.pageNum = size
  webListApi()
}

function gotoDetail(item) {
  window.open('https://zyk.icve.com.cn/materialDetailed?id=' + item.id)
}
function searchHandle(value) {
  params.keyWord = value
  webListApi()
}
onMounted(() => {
  eventBus.$off('searchHandleMajor', searchHandle)
  eventBus.$on('searchHandleMajor', searchHandle)
})
onBeforeUnmount(() => {
  eventBus.$off('searchHandleMajor', searchHandle)
})
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  margin-top: 20px;
}
.majorList {
  display: flex;
  flex-wrap: wrap;
}
.tabItem:last-child {
  margin-right: 0;
}
.bgColor {
  min-height: 528px;
}
.flexbox {
  display: flex;
  justify-content: space-between; /* 实现两端对齐 */
  margin-bottom: 6px;
}
.flex {
  display: flex;
  align-items: center;
}
.spancss {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #8d9099;
  margin-left: 8px;
}
.title {
  width: 230px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
}
.infobox {
  padding: 8px 12px 0px 12px;
}
.itembox {
  width: 305px;
  height: 286px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-top: 28px;
  margin-right: 20px;
  transition: transform 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  .majorimg {
    height: 172px;
    width: 100%;
  }
}
.itembox:hover {
  transform: translateY(-8px);
  box-shadow: 0px 4px 12px 0px rgba(0, 39, 60, 0.12);
  .title {
    color: #178fd1;
  }
}
.itembox:nth-child(4n) {
  margin-right: 0;
}
.activeCss {
  background: #e6f3fa;
  color: #178fd1 !important;
  border-radius: 50px 50px 50px 50px;
}
.label {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
  flex-shrink: 0;
  margin-top: 4px;
}
.tabItem {
  padding: 4px 14px;
  cursor: pointer;
  margin: 0 20px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #45474d;
}
.tabbox {
  display: flex;
  flex-wrap: wrap;
}
.categoryBox {
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin: 30px 0;
  margin-bottom: 0px;
  display: flex;
  padding: 34px 30px;
}
</style>
